<!--
 * @Author: [wangll]
 * @Date: 2021-09-22 19:38:40
 * @LastEditors: [wangll]
 * @LastEditTime: 2021-09-23 17:30:20
 * @Description: 封装右面表格
-->
<template>
    <div class="rank">
        <div class="rank_top" >
            <p><span>最新</span></p>
            <div class="new_outer" v-for="item in hotArticles" :key="item.id">
            <span class="publishTime">{{item.publishTime | fmtDate}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="new" @click="toDetail(item.id)">{{item.title}}</span>                
            </div>
        </div>          
        <div class="rank_bottom">     
            <p><span>热门</span></p>
            <div class="hot_outer"  v-for="item in hotArticles" :key="item.id">
            <div class="hot" @click="toDetail(item.id)">{{item.title}}</div>  
            <div class="hot_list">
                <span class="publishTime">{{item.publishTime | fmtDate}}</span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span class="readTimes">{{item.readTimes}}</span>
            </div>
            </div>   
        </div>
    </div>
</template>
<script>
import {get} from '../utils/request';
export default {
    data(){
        return{
            hotArticles:{},
        }
    },
    created(){
      this.loadHotArtical();
    },

    methods:{
      //跳转文章
      toDetail(id){
          // alert(JSON.stringify(item));
          this.$router.push({
              path:'/article',
              query:{id}
          })
      },
        //加载右边页面
        loadHotArtical(){
            let url='/index/article/findHotArticles';
            get(url).then(res=>{
            this.hotArticles=res.data;
                // console.log(res.data);
            })
        },
    }

}
</script>
<style lang="scss">
    .rank{
        background-color: #cbe3e5;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        flex-basis:400px;
        .rank_top{
            p span{
                background-color: #028b39;
                color: #fff;
                font-size: 30px;
                padding:.5em;
            }
            flex: 1;
            background-color: white;
            margin-bottom: 2em;
            .new_outer{
                border-bottom: 1px solid #ededed;
                padding: 1em .5em;
                font-size: 16px;
                .new:hover{
                    cursor: pointer;
                    color: #057d7c;
                }
                .publishTime{
                     color: #028b39;
                }
            }
        }
        .rank_bottom{
            p span{
                background-color: #ff7800;
                color: #fff;
                font-size: 30px;
                // display: inline-block;
                padding: .5em;
            }
            flex: 1;
            background-color: white;
            .hot_outer{
                font-size: 16px;
                border-bottom: 1px solid #ededed;
                .hot{
                    padding: 1em .5em;
                }
                .hot:hover{
                    cursor: pointer;
                    color: #057d7c;
                }
                .hot_list{
                    padding: 1em .5em;
                }
            }
        }
    }

</style>